<template>
    <div>
      <h1>（提升认识）响应式的进一步理解：</h1>
      <!-- 1、模板上：当响应式的数据发生变化时，模板会自动重新执行 -->
      <p>count:{{count}}</p>
      <input type="button" value="修改count" @click="changeCount">
      <p>s:{{s}}</p>

    </div>
  </template>
    
  <script setup>

  // 响应式的进一步理解：
  // 1、响应式的数据（ref，reactive，computed），在模板上使用，不用担心响应式的问题（因为，vue自动做了订阅）
  // 2、响应式的数据（ref，reactive，computed），在js中使用，就需要程序员自己完成响应式的处理（如：watch，watchEffect）

  import {ref, watchEffect,watch,computed} from "vue";

  let count = ref(2);

  function changeCount(){
    count.value++;
  }

  // 2、在js中，当响应式的数据发生变化时，js代码不会自动执行。所以说，vue中提供了watch，watchEffect让程序员在js代码时，能够完成响应式数据引起的js代码的执行
  function fn(){
    console.log("fn:count.value",count.value);
  }

  watchEffect(()=>{
    console.log("watchEffect:count.value",count.value);
  })

  watch(count,()=>{
    console.log("watch:count.value",count.value);
  });

// 定义一个计算属性，计算属性和ref（reactive）是同样的道理，都是定义数据。
  let s = computed(()=>{
    console.log("computed:count.value",count.value);
    return  count.value++;
  })

 
  
  
  </script>
  
  <style scoped>
  
  </style>